<template>
	<view class="content">
		<view class="section-0">
			<view class="section-body">
				<view @click="setCurTab(item)" :class="`item ${curTab.name === item.name ? 'item__active' : ''}`" v-for="item in tabList" :key="item.name">
					<view class="top">{{item.name}}</view>
					<view class="top">{{data[`${item.type}_num`]}}</view>
				</view>
			</view>
		</view>
		<view class="section-1">
			<view class="statistics">
				<view class="item">
					<view class="top">线路规模</view>
					<view class="bottom">
						<text class="iconfont icon-qizhi"></text>
						{{data[`${curTab.type}_scale`] && data[`${curTab.type}_scale`].xl_scale? data[`${curTab.type}_scale`].xl_scale : 0}}
						<text class="unit">公里</text>
					</view>
				</view>
				<view class="shape"></view>
				<view class="item">
					<view class="top">变电规模</view>
					<view class="bottom">
						<text class="iconfont icon-shandian-shi"></text>
						{{data[`${curTab.type}_scale`] && data[`${curTab.type}_scale`].bd_scale? data[`${curTab.type}_scale`].bd_scale:0}}
						<text class="unit">万千伏安</text>
					</view>
				</view>
			</view>
			<view class="list" v-if="data[`${curTab.type}_child`] && data[`${curTab.type}_child`].length > 0">
				<view :class="`item ${expandList.indexOf(item.id) !== -1 ? 'item__expand' : ''}`" v-for="item in data[`${curTab.type}_child`]" :key="item.name">
					<view class="parent">
						<view class="name">
							{{item.projectName}}
						</view>
						<view class="action" @click="expandChange(item.id)">
							<view class="iconfont icon-xiala"></view>
						</view>
						<view class="info">
							<text>计划开工时间：{{formatDate(item.kgTime)}}</text>
							<text>计划投产时间：{{formatDate(item.tcTime)}}</text>
						</view>
					</view>
					<view class="child" v-if="expandList.indexOf(item.id) !== -1">
						<view class="child-item" v-for="item2 in item.children" :key="item2.id">
							<view class="top">
								<view class="name">
									{{item2.projectName}}
								</view>
								<view class="info">
									<text>计划投产时间：{{formatDate(item2.tcTime)}}</text>
									<text>总投资：{{item2.projectTz}}</text>
								</view>
								<view class="info">
									<text>实际投产时间：{{formatDate(item2.tcTimeReal)}}</text>
									<text>规模：{{item2.projectScale1 > 0 ? item2.projectScale1 + '万千伏' : item2.projectScale2 + '公里'}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="custom-empty">
				<text class="iconfont icon-zanwushuju"></text>
				<view class="empty-title">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { projectAnalysisApi__java } from '@/api/statistics.js';
	import { mapGetters, mapActions} from 'vuex';
	export default {
		data() {
			return {
				name: '',
				board: [
					{ name: '项目总数', count: 34, right: true },
					{ name: '完成项目总数', count: 34, right: true },
					{ name: '未完成项目总数', count: 34 },
				],
				tabList: [
					{name: '年度开工', count: 10, type: 'result6'},
					{name: '年度投产', count: 10, type: 'result7'},
					{name: '已完成开工', count: 8, type: 'result8'},
					{name: '已完成投产', count: 10, type: 'result9'},
					{name: '本月开工', count: 10, type: 'result2'},
					{name: '本月投产', count: 10, type: 'result3'},
					{name: '下月开工', count: 10, type: 'result10'},
					{name: '下月投产', count: 10, type: 'result11'},
				],
				list: [
					{ id: 1, name: '泰兴500kV变电站保护改造工程', count: 1, childern: [
						{ id: 3, name: '泰兴500kV变电站保护改造工程', level: 3, type: '扩建工程' },
						{ id: 4, name: '泰兴500kV变电站保护改造22工程', level: 1, type: '扩建工程2' }
					]},
					{ id: 2, name: 'xxxxxx改造工程', count: 99},
				],
				curTab: {name: '年度开工', count: 10, type: 'result6'},
				expandList: [1],
				data: {}
			};
		},
		methods: {
			setCurTab(item) {
				this.curTab = item;
			},
			formatDate(timeStamp) {
				if (!timeStamp) {
					return ''
				}
				const date =new Date(timeStamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				const Y = date.getFullYear() +'-';
			    const M = (date.getMonth() +1 <10 ?'0' + (date.getMonth() +1) : date.getMonth() +1) +'-';
			    const D = date.getDate();
			   	return Y + M + D;  
			},
			expandChange(id) {
				const idx = this.expandList.indexOf(id);
				if (idx !== -1) {
					this.expandList.splice(idx, 1);
				} else {
					this.expandList.push(id);
				}
			},
			async fetchData() {
				uni.showLoading({title: '加载中...'});
				const { data } = await projectAnalysisApi__java({});
				uni.hideLoading();
				if (data.code === 1 || data.code === 200) {
					this.data = data;
				}
			},
		},
		onReady() {
			this.fetchData();
		}
	}
</script>

<style lang="scss" scoped>
	.custom-empty{
		top: 30vh!important;
	}
	.content{
		background-color: #fff;
	}
	.section-0{
		width: 100%;
		background-color: #2e5efe;
		.section-body{
			width: 100%;
			padding-left: 40rpx;
			padding-top: 50rpx;
			padding-right: 40rpx;
			padding-bottom: 70rpx;
			background-color: #1534ce;
			background-size: cover;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			overflow: hidden;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item{
				width: 151rpx;
				height: 76rpx;
				border-radius: 20rpx;
				border: solid 2rpx #395bf3;
				text-align: center;
				margin-bottom: 15rpx;
				transition: 0.3s ease;
				.top{
					width: 100%;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #395bf3;
					margin-top: 8rpx;
					transition: 0.3s ease;
				}			
			}
			.item__active{
				border-color: #fff;
				.top{
					color: #fff;
				}
			}
		}
	}
	.section-1{
		position: relative;
		top: -50rpx;
		z-index: 10;
		background-color: #fff;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		.statistics{
			box-sizing: border-box;
			padding: 0 40rpx;
			width: 100%;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			@include clear();
			.item{
				width: 333rpx;
				height: 85rpx;
				float: left;
				.top{
					width: 100%;
					text-align: center;
					font-size: 16rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 30rpx;
					letter-spacing: 2rpx;
					color: #7f98ae;
				}
				.bottom{
					width: 100%;
					text-align: center;
					font-size: 50rpx;
					font-weight: bold;
					color: #3b3c40;
					line-height: 60rpx;
					height: 60rpx;
					.iconfont{
						font-size: 50rpx;
						font-weight: normal;
					}
					.unit{
						font-size: 16rpx;
						font-weight: normal;
						letter-spacing: 2rpx;
						color: #7f98ae;
					}
				}
			}
			.shape {
				float: left;
				width: 4rpx;
				height: 85rpx;
				background-image: linear-gradient(rgba(#d8e4f2, 0.3) 0%, #d8e4f2 30%, #d8e4f2 70%, rgba(#d8e4f2, 0.3) 100%, );
			}
		}
		.list{
			border-top: solid 2rpx #d8e4f2;
			width: 670rpx;
			box-sizing: border-box;
			margin-left: 40rpx;
			.item{
				width: 100%;
				border-bottom: solid 2rpx #f2f2f0;
				.parent{
					width: 100%;
					padding: 20rpx 0;
					@include clear();
					.info{
						width: 100%;
						float: left;
						height: 24rpx;
						line-height: 24prx;
						font-size: 16rpx;
						color: #7f98ae;
						margin-top: 8rpx;
						text{
							margin-right: 30rpx;
							&:last-child{
								margin-right: 0;
							}
						}
					}
					.name{
						width: 520rpx;
						height: 40rpx;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 40rpx;
						letter-spacing: 2rpx;
						color: #3b3c40;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						float: left;
					}
					.action{
						float: right;
						width: 32rpx;
						height: 100%;
						line-height: 45rpx;
						text-align: center;
						color: #3b3c40;
						.iconfont{
							font-size: 32rpx;
							transition: 0.2s ease;
						}
		
					}
				}
				.child{
					width: 750rpx;
					margin-left: - 40rpx;
					background: #f2f2fa;
					.child-item{
						width: 670rpx;
						margin-left: 40rpx;
						border-bottom: 2rpx solid #e3e8f5;
						&:last-child{
							border-bottom: none;
						}
						.top{
							width: 100%;
							overflow: hidden;
							padding-top: 20rpx;
							padding-bottom: 10rpx;
							.name{
								float: left;
								width: 620rpx;
								height: 50rpx;
								line-height: 50rpx;
								color: #3b3c40;
								font-size: 26rpx;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}
							.info{
								width: 100%;
								float: left;
								height: 24rpx;
								line-height: 24prx;
								font-size: 16rpx;
								color: #7f98ae;
								margin-bottom: 8rpx;
								text{
									display: inline-block;
									width: 50%;	
								}
							}
						}
					}
				}
			}
			.item__expand{
				.parent{
					.action{
						.iconfont{
							transform: rotate(-180deg);
						}
					}
				}
				.child{
					box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.03) inset;
				}
			}
			
		}
	}
	
</style>
